<template>
	<view>
		<uni-nav-bar :background="isbg" :shadow="false" :border="false">
			<block slot="left">
				<view class="nav-reft">
					<view class="tupiao1">
						<image v-if="isShowRed" src="../../static/images/nav/tubiaoku.png" mode="widthFix"></image>
						<image v-else src="../../static/images/nav/tubiaoku2.png" mode="widthFix"></image>
					</view>
					<view class="tupiao1">
						<image v-if="isShowRed" src="../../static/images/nav/neicun.png" mode="widthFix"></image>
						<image v-else src="../../static/images/nav/neicun2.png" mode="widthFix"></image>
					</view>
					<view class="tupiao1">
						<image v-if="isShowRed" src="../../static/images/nav/tongbu.png" mode="widthFix"></image>
						<image v-else src="../../static/images/nav/tongbu2.png" mode="widthFix"></image>
					</view>
					<view class="tupiao1">
						<image v-if="isShowRed" src="../../static/images/nav/xitong.png" mode="widthFix"></image>
						<image v-else src="../../static/images/nav/xitong2.png" mode="widthFix"></image>
					</view>
					<view class="text" :class="{'active':!isShowRed}">运行:{{hours}}小时{{minute}}分</view>
				</view>
			</block>
			<view class="title"><view class="nav-title">LOGO</view></view>
			<block slot="right">
				<view class="nav-right">
					<view class="right-jingao">
						<view class="jingao-tupiao" :class="{'isRed':isShowRed==false}"><text>!</text></view>
					<!-- 	<image v-if="isShowRed" src="../../static/images/nav/jinggao.png" mode="widthFix"></image>
						<image v-else src="../../static/images/nav/jinggao2.png" mode="widthFix"></image> -->
					</view>
					<view class="nav-img"></view>
					<view class="nav-day">
						<text class="day-top">{{nowWeek}}</text>
						<text class="day-bottom">{{nowDate}}</text>
					</view>
					<view class="nav-img"></view>
					<view class="nav-date">{{nowTime}}</view>
				</view>
			</block>
		</uni-nav-bar>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		props: {
			isShowRed: {
				type: Boolean,
				default: true
			}
		},
		components:{
			uniNavBar
		},
		data() {
			return {
				isbg:'linear-gradient(180deg, rgba(114, 180, 255, 0.8), rgba(73, 153, 235, 0.8), rgba(43, 125, 209, 0.8))', //导航栏背景
				testTime:null,
				timeId2:null,
				timeId3:null
			}
		},
		computed:{
			...mapState(['hours','runTime','minute','id','nowDate','nowTime','nowWeek','nowTimeId'])
		},
		created() {	
			// this.forMat();
			// this.runTimes()
		},
		// onReady() {
		// 	console.log(this.nowDate,this.nowTime,this.nowWeek);
		// },
		methods: {
			forMat() {
				this.$store.commit('getCurrentDate',new Date())
				if(this.timeId2==this.nowTimeId){
					this.timeId2 = setInterval(()=>{
						this.$store.commit('getCurrentDate',new Date())
						this.$store.commit('setNowTimeId',this.timeId2)
						uni.$emit('clearTimeId2',this.timeId2)
					},1000*10)
				}
			},
			runTimes() {
				let ZRunTime = this.runTime
				if(this.timeId3==this.id){
					this.timeId3 = setInterval(()=>{
						ZRunTime++
						this.$store.commit('ProcessinTime',ZRunTime)
						this.$store.commit('setTimeId',this.timeId3)
						uni.$emit('clearTimeId3',this.timeId3)
					},1000)
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.active{
		color: red;
	}
	.isRed{
		background: red !important;
	}
	.title{
		width: 100%;	
	}
	.nav-title{
		color: #FFFFFF;
		font-size: 55rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// padding: 0 140rpx;
	}
	.nav-reft{
		display: flex;
		align-items: center;
		color: #FFFFFF;
		margin-left: 56rpx;
		.tupiao1{
			display: flex;
			align-items: center;
			image{
				width: 37rpx;
				height:37rpx;
				margin-right: 41rpx;
			}
		}
		.text{
			font-size: 34rpx;
		}
	}
	.nav-right{
		display: flex;
		align-items: center;
		// margin-left: 8rpx;
	}
	.right-jingao{
		display: flex;
		align-items: center;
		margin-right: 40rpx;
		
		.jingao-tupiao{
			width: 37rpx;
			height: 37rpx;
			position: relative;
			background: #FFFFFF;
			border-radius: 50%;
			text{
				position: absolute;
				top: 50%;
				left: 47%;
				transform: translateX(-47%) translateY(-50%);
				font-weight: 500;
				font-size: 30rpx;
				color: #4999EB;
			}
		}
		// image{
		// 	width: 12rpx;
		// 	height: 28.51rpx;
		// }
	}
	.nav-img{
		width: 4rpx;
		height: 50rpx;
		background: #5185DC;
		box-shadow: 1rpx 0px 1rpx 0px #A2C2F3;
		// margin-right: 11rpx;
	}
	.nav-day{
		display: flex;
		flex-direction: column;
		margin: 0 46rpx 0 30rpx;
		// margin-right: 14rpx;
		font-size: 30rpx;
		line-height: 50rpx;
		text-align: right;
		color: #FFFFFF;
	}
	.day-top{
		
	}
	.day-bottom{
		
	}
	.nav-date{
		font-size: 40rpx;
		margin: 0 0 0 40rpx;
		color: #FFFFFF;
	}
</style>
